<template>
	<view class="flex-col page space-y-22">
		<view class="top">
			<view class="search">
				<u-search shape="round" :showAction="false" placeholder="搜索设备" @search="selectList"
					@change="selectList"></u-search>
			</view>
			<view class="map" @click="jump">
				<map style="width: 100%; height: 75%;" @click="jump"></map>
				<p>点击查看地图</p>
			</view>
		</view>
		<placeList :dataList="dataList" :countList="countList" @update="refreshList"></placeList>
	</view>
</template>

<script>
	import indexApi from "@/api/index.js"
	import placeList from "../components/placeList.vue"
	import {
		BASE_URL,
		BASE_API
	} from '@/config/url.js'
	import ccMyTabbar from "@/components/cc-myTabbar/cc-myTabbar.vue";
	import countTo from "../../../uni_modules/uview-ui/libs/config/props/countTo";
	export default {
		components: {
			ccMyTabbar,
			placeList,
		},
		data() {
			return {
				oldList:[],
				dataList: [],
				params: {
					status: 3,
				},
				countList: {
					total: 0,
					online: 0,
					alarm: 0,
					offline: 0
				},
			};
		},
		onLoad(option) {
			this.getList()
			const username = uni.getStorageSync("username");
			const password = uni.getStorageSync("password");
			console.log('username', username, 'password', password);
		},
		watch: {

		},
		methods: {
			jump() {
				uni.navigateTo({
					url: '/pages/map/map'
				})
			},
			//初始化
			getList() {
				indexApi.listDeviceNew(this.params).then(res => {
					this.dataList = res.data.data;
					this.oldList = res.data.data;
					
					this.updateCountList(); // 更新设备数量统计
				});
			},
			updateCountList() {
				this.countList.total = this.dataList.length;
				this.countList.online = this.dataList.filter(item => item.status === '在线').length;
				this.countList.offline = this.countList.total - this.countList.online;
			},

			refreshList(data) {
				if (data) {
					const filteredList = this.oldList.filter(item => item.status === data);
					this.dataList = filteredList;
				} else {
					this.getList();
				}
			},
			//搜索		
			selectList(val) {
			  if (val) {
			    const regex = new RegExp(val, 'i'); // 创建不区分大小写的正则表达式
			    const filteredList = this.oldList.filter(item => regex.test(item.deviceName) || regex.test(item.deviceId));
			    this.dataList = filteredList;
			  } else {
			   this.dataList= this.oldList
			  }
			}
			
			
		}


	};
</script>


<style>
	page {
		background-color: #EFEFF4;
	}

	.top {
		background-color: #fff;
	}

	.search {
		padding: 0 32rpx;
		margin-bottom: 18rpx;
	}

	.map {
		height: 280rpx;
		padding: 14rpx 14rpx 0;
		/* box-shadow: 0px 4rpx 6rpx 2rpx rgba(0, 0, 0, 0.1); */
	}

	.map p {
		width: 144rpx;
		margin: 18rpx 0 0 552rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #898888;
	}
</style>